import React, { Component } from 'react';
import {ResterCaptchaUrl,PasswordUrl} from './common/url';
import {browserHistory, Link} from 'react-router';

export default class Register extends Component {

  constructor(props){
    super(props);
    this.state = {
      registerTime:'发送验证码',
      step1style: {display:"block"},
      step2style: {display:"none"},
      step3style: {display:"none"},
      afterRegister: 5
    }
    this.getCaptcha = this.getCaptcha.bind(this)
  }

  changePassword(){
    fetch(PasswordUrl,{
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body:"username="+this.refs.username.value+"&password="+this.refs.password.value+"&captcha="+this.refs.captchainput.value
    }).then(function(res){
      if(res.ok) {
        this.setState({
          step3style: {display:"block"},
          step2style: {display:"none"}
        })
        let afterR = setInterval(()=>{
          if(this.state.afterRegister == 0){
            browserHistory.push("/");
          }else{
            this.setState({afterRegister:this.state.afterRegister-1})
          }
        },1000);
      } else if (res.status == 404) {
        this.refs.errmsg.innerHTML = '密码更换失败，请重新尝试！';
      }
    }.bind(this),function(e){
      console.log(e);
      this.refs.errmsg.innerHTML = '网络连接失败，请稍后尝试！';
    })
  }

  secondStep(){
    if(this.refs.captchainput.value.length == 6){
      this.setState({
        step1style: {display:"none"},
        step2style: {display:"block"}
      });
    }else{
      this.refs.errmsg.innerHTML = '验证码错误！';
    }
  }

  passwordVerify(){
    if(this.refs.password.value == this.refs.repassword.value){
      this.refs.changepass.removeAttribute("disabled");
    }else{
      this.refs.errmsg2.innerHTML = '两次密码不一致！';
      this.refs.changepass.setAttribute("disabled","disabled"); 
    }
  }

  //获取验证码
  getCaptcha(){
    fetch(ResterCaptchaUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body: "username="+this.refs.username.value
    }).then(function(res) {
      if(res.ok) {
        this.refs.captcha.setAttribute("disabled","disabled");   
        this.setState({registerTime:60});
        const captchaT = setInterval(()=>{
          if(this.state.registerTime == 0){
            this.setState({registerTime:"发送验证码"});
            this.refs.captcha.removeAttribute("disabled");
            clearInterval(captchaT);
          }else{
            this.setState({registerTime:this.state.registerTime-1})
          }},1000)
      } else if (res.status == 404) {
        this.refs.errmsg.innerHTML = '此手机号已被注册！';
      }
    }.bind(this), function(e) {
      console.log(e);
      this.refs.errmsg.innerHTML = '验证码发送失败，请稍后尝试！';
    });

  }

  render() {
    return (
        <div className="registerbg" >
            <div className="registerbox" style={this.state.step1style}>
              <fieldset>
              <div>
                <h1 className="register-title">捷报云</h1>
                <p className="small-title"> 请填写您需要改密的账号信息。 </p>
              </div>
              <div className="form-group">
                <input className="form-control" ref="username" placeholder="手机号" name="username" type="text" />
              </div>
              <div className="form-group">
                <input className="form-control vleft" ref="captchainput" placeholder="验证码" name="captchainput" type="text" />
                <button type="button" ref="captcha" className="btn btn-default vright" onClick={this.getCaptcha}>{this.state.registerTime}</button>
              </div>
              <div ref="errmsg" className="errmsg"></div>	
              <div className="box-btn">
				        <button className="btn btn-primary" ref="loginBtn" onClick={this.secondStep.bind(this)}>下一步</button>
              </div>
			      </fieldset>
          </div>
          <div className="registerbox" style={this.state.step2style}>
            <fieldset>
              <div>
                <h1 className="register-title">捷报云</h1>
                <p className="small-title"> 请输入您的新密码。 </p>
              </div>
              <div className="form-group">
                <input className="form-control" ref="password" placeholder="新密码" name="password" type="password" />
              </div>
              <div className="form-group">
                <input className="form-control" ref="repassword" placeholder="再次输入密码" name="repassword" type="password" onBlur={this.passwordVerify.bind(this)} />
              </div>
              <div ref="errmsg2" className="errmsg"></div>	
              <div className="box-btn">
                <button className="btn btn-primary" ref="changepass" onClick={this.changePassword.bind(this)}>更改密码</button>
              </div>
            </fieldset>
          </div>
            <div className="registerbox verify" style={this.state.step3style}>
              <fieldset>
                <div>
                  <h1 className="register-title">捷报云</h1>
                  <p className="small-title"> 密码更改成功！</p>
                </div>	
                <div className="form-group">
                  密码更改成功，{this.state.afterRegister}秒后将跳转至登陆页面！<Link to="/">点此立即跳转。</Link>
                </div>
            </fieldset>
          </div>
        </div>
    )
  }
}